import React from "react";
import { FormGrid as FormilyGird } from "../../packages/formily-antd-v5/src";
import {
  TreeNode,
  createBehavior,
  createResource,
} from "../../packages/designable-core/src";
import {
  DnFC,
  useTreeNode,
  useNodeIdProps,
  DroppableWidget,
} from "../../packages/designable-react/src";
import { observer } from "../../packages/formily-reactive-react/src";
import { LoadTemplate } from "../../common/LoadTemplate";
import { createFieldSchema } from "../Field";
import { AllSchemas } from "../../schemas";
import { AllLocales } from "../../locales";
import "./styles.less";

type formilyGrid = typeof FormilyGird;

export const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
  GridColumn?: React.FC<React.ComponentProps<formilyGrid["GridColumn"]>>;
} = observer((props) => {
  const node = useTreeNode();
  const nodeId = useNodeIdProps();
  if (node.children.length === 0) return <DroppableWidget {...props} />;

  return (
    <div {...nodeId} className="dn-grid">
      <FormilyGird {...props}>{props.children}</FormilyGird>
      <LoadTemplate
        actions={[
          {
            title: node.getMessage("addGridColumn"),
            icon: "AddColumn",
            onClick: () => {
              const column = new TreeNode({
                componentName: "Field",
                props: {
                  type: "void",
                  "x-component": "FormGrid.GridColumn",
                },
              });
              node.append(column);
            },
          },
        ]}
      />
    </div>
  );
});

FormGrid.GridColumn = observer(({ gridSpan, ...props }) => {
  return (
    <DroppableWidget {...props} data-grid-span={gridSpan}>
      {props.children}
    </DroppableWidget>
  );
});

FormGrid.Behavior = createBehavior(
  {
    name: "FormGrid",
    extends: ["Field"],
    selector: (node) => node.props["x-component"] === "FormGrid",
    designerProps: {
      droppable: true,
      allowDrop: (node) => node.props["x-component"] !== "FormGrid",
      propsSchema: createFieldSchema(AllSchemas.FormGrid),
    },
    designerLocales: AllLocales.FormGrid,
  },
  {
    name: "FormGrid.GridColumn",
    extends: ["Field"],
    selector: (node) => node.props["x-component"] === "FormGrid.GridColumn",
    designerProps: {
      droppable: true,
      allowDrop: (node) => node.props["x-component"] === "FormGrid",
      propsSchema: createFieldSchema(AllSchemas.FormGrid.GridColumn),
    },
    designerLocales: AllLocales.FormGridColumn,
  }
);

FormGrid.Resource = createResource("Layouts", {
  icon: "GridSource",
  elements: [
    {
      componentName: "Field",
      props: {
        type: "void",
        "x-component": "FormGrid",
      },
      children: [
        {
          componentName: "Field",
          props: {
            type: "void",
            "x-component": "FormGrid.GridColumn",
          },
        },
        {
          componentName: "Field",
          props: {
            type: "void",
            "x-component": "FormGrid.GridColumn",
          },
        },
        {
          componentName: "Field",
          props: {
            type: "void",
            "x-component": "FormGrid.GridColumn",
          },
        },
      ],
    },
  ],
});
